<template>
    <view class="content padding">
        <view class="head padding shadow">
            <view class="info flex flex-direction justify-between" style="height: 122rpx;">
                <text>店铺名称</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="text" v-model="businessInfo.name" placeholder="请输入店铺名称" />
                </view>
            </view>
            <view class="info flex flex-direction justify-between" style="height: 122rpx;" @click="getAddress">
                <text>店铺地址</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="text" disabled="" v-model="businessInfo.address" placeholder="请选择地址" />
                </view>
            </view>

            <!-- <view class="info flex flex-direction justify-between" style="height: 122rpx;">
				<text>详细地址</text>
				<view class="flex align-center  info_o response padding-lr"><input type="text" v-model="businessInfo.address"
					 placeholder="请输入详细地址" /></view>
			</view> -->
            <view class="info flex flex-direction justify-between" style="height: 122rpx;">
                <text>联系电话</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="number" v-model="businessInfo.contactNumber" placeholder="请输入联系电话" />
                </view>
            </view>

            <view class="info flex flex-direction justify-between" style="height: 122rpx;">
                <text>公告</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="text" v-model="businessInfo.announcement" placeholder="请输入公告" />
                </view>
            </view>

            <view class="info flex flex-direction justify-between" style="height: 122rpx;">
                <text>商家介绍</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="text" v-model="businessInfo.merchantService" placeholder="请输入商家介绍" />
                </view>
            </view>

            <view class="info flex flex-direction justify-between" style="height: 122rpx;">
                <text>营业时间</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="text" v-model="businessInfo.businessHours" placeholder="请输入营业时间" />
                </view>
            </view>
            <view class="info flex flex-direction justify-between" style="height: 122rpx;">
                <text>分类</text>
                <view class="flex align-center  info_o response padding-lr">
                    <input type="text" disabled="" v-model="frstClasClassification" placeholder="请选择一级分类" @click="sel(1)" />
                    <input type="text" disabled="" v-model="secondaryClassification" placeholder="请选择二级分类" @click="sel(2)" />
                </view>
            </view>
        </view>
        <view class="head padding shadow margin-top">
            <view class="info flex flex-direction justify-between">
                <text>店铺头像</text>
                <view class="sfz ">
                    <view
                        @click="ChooseImage('businessInfo.image')"
                        style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
                    >
                        <image :src="businessInfo.image" mode="aspectFill" v-if="businessInfo.image"></image>
                        <view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
                    </view>
                </view>
            </view>
            <view class="info flex flex-direction justify-between">
                <text>法人身份证正反面</text>
                <view class="sfz ">
                    <view
                        @click="ChooseImage('businessInfo.idCardPositive')"
                        style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
                    >
                        <image :src="businessInfo.idCardPositive" mode="aspectFill" v-if="businessInfo.idCardPositive"></image>
                        <view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
                    </view>
                    <view
                        @click="ChooseImage('businessInfo.idCardObverse')"
                        style="position: relative; width: 300rpx;height: 200rpx;background-color: #f1f1f1;"
                    >
                        <image :src="businessInfo.idCardObverse" mode="aspectFill" v-if="businessInfo.idCardObverse"></image>
                        <view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
                    </view>
                </view>
            </view>
            <view class="info flex flex-direction justify-between">
                <text>营业执照</text>
                <view class="sfz ">
                    <view
                        @click="ChooseImage('businessInfo.businessLicense')"
                        style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
                    >
                        <image :src="businessInfo.businessLicense" mode="aspectFill" v-if="businessInfo.businessLicense"></image>
                        <view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
                    </view>
                </view>
            </view>
            <view class="info flex flex-direction justify-between">
                <text>背景图片</text>
                <view class="sfz ">
                    <view
                        @click="ChooseImage('businessInfo.backgroundPicture')"
                        style="position: relative; width: 300rpx;height: 200rpx;margin-right: 30rpx;background-color: #f1f1f1;"
                    >
                        <image :src="businessInfo.backgroundPicture" mode="aspectFill" v-if="businessInfo.backgroundPicture"></image>
                        <view class="dianji" v-else><text class="cuIcon-add text-xl"></text></view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <u-popup v-model="showProw" mode="center" border-radius="14" width="80%" height="400px">
			<view class="padidng">
				<view class="flex text-bold justify-center align-center padding-tb-xs " style="font-size: 35rpx;">
					协议
				</view>
				
				<scroll-view scroll-y="true" style="height: 320px;" >
					<view></view>
				</scroll-view>
				<view class="flex justify-center" style="width: 550rpx;">
					<button style="background-color: #F9CD3A; color: #030303; font-size: 35rpx; width: 500px;" class="flex align-center cu-btn  justify-center padding-tb-lg text-bold ">同意</button>
				</view>
				
			</view>
		</u-popup> -->

        <!-- <u-mask :show="showProw">
			<view class="flex flex-direction justify-center align-center  ww100 hh100">
				<view class="ww70 h476 r20 bg-white padding flex flex-direction align-center  ">
					<text class="f28 text-black text-bold text-bold ">协议</text>
					<text class="mt10 text-gray f24" >
						1、在您浏览使用时，我们会收集您的设备信息、操作日志等用于平台安全风控，并申请存储权限用于下载及缓存。
						2、在您使用上传、分享、连麦等服务时，我们需要获取您设备的摄像头、麦克风、相册、地理位置、存储空间等权限，但该等权限均需经您明示授权才会为实现功能或服务时使用。
					</text>
				</view>
				<button class="cu-btn w320 h80 r40 mt20 text-black" style="background-color: #F8CE39;">同意并继续</button>
			</view>
		</u-mask> -->
        <view class=" flex justify-center mt20">
            <u-checkbox-group @change="checkboxGroupChange">
                <u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
                    <text @click="protocol">{{ item.name }}</text>
                </u-checkbox>
            </u-checkbox-group>
        </view>

        <u-toast ref="uToast" />
        <button class="cu-btn determine" @click="addBusiness()">确定</button>
        <u-select v-model="show" mode="single-column" :list="resultObj" @confirm="confirm" value-name="id" label-name="explanation"></u-select>
        <u-select v-model="show1" mode="single-column" :list="resultObj1" @confirm="confirm1" value-name="id" label-name="name"></u-select>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            list: [
                {
                    name: '用户服务协议',
                    checked: false,
                    disabled: false,
                },
            ],
            // u-radio-group的v-model绑value: '用户协议',
            showProw: true,
            resultObj: [], //分类
            resultObj1: [], //分类
            businessInfo: {
                image: '',
                idCardPositive: '',
                idCardObverse: '',
                businessLicense: '',
                backgroundPicture: '',
                address: '',
                announcement: '',
                businessHours: '',
                contactNumber: '',
                iconFilter: null,
                categoryId: '',
                merchantService: '',
                name: '',
                announcement: '',
                merchIntroduction: '',
                nameRemarks: '',
                ownerId: '',
                longitude:'',
                latitude:'',
            },
            imgList: [],
            show: false,
            show1: false,
            frstClasClassification: '',
            frstClasClassificationValue: '',
            secondaryClassification: '',
            secondaryClassificationValue: '',
            value: false,
        };
    },
    onLoad(e) {
        app.globalData.api.getUser().then(res4 => {
            this.businessInfo.ownerId = res4.resultObj.user.id;
            console.log("this.businessInfo.ownerId: ",this.businessInfo.ownerId);
        
            
        });
        this.getClassification();
    },
    methods: {
        // 选中某个复选框时，由checkbox时触发
        checkboxChange(e) {
            console.log(e);
            this.value = e.value;
        },
        // 选中任一checkbox时，由checkbox-group触发
        checkboxGroupChange(e) {
            // console.log(e);
        },
        async sel(e) {
            console.log('e :>> ', e);
            if (e == 1) {
                this.show = true;
            } else {
                this.show1 = true;
            }
        },
        protocol() {
            uni.navigateTo({
                url: '../../subPages/protocol1/protocol1',
            });
        },
        async confirm(e) {
            this.frstClasClassification = e[0].label;
            this.businessInfo.categoryId = e[0].value;

            this.secondaryClassification = '';
            // this.secondaryClassificationValue = '';

            this.businessInfo.iconFilter = '';

            var arr = this.resultObj.filter((item, index) => {
                if (item.id == e[0].value) {
                    return item.categorys;
                }
            });
            this.resultObj1 = arr[0].categorys;
            console.log('this.resultObj1  : ', this.resultObj1);
        },
        async confirm1(e) {
            this.secondaryClassification = e[0].label;
            this.businessInfo.iconFilter = e[0].value;
        },
        async getClassification() {
            var that = this;
            app.globalData.api.getCategory().then(res => {
                console.log('所有分类>>>>>> :>> ', res.resultObj);
                that.resultObj = res.resultObj;
            });
        },
        async getAddress() {
            const [, { name, address, longitude, latitude }] = await uni.chooseLocation();
            this.businessInfo.address = address;
            this.businessInfo.longitude = longitude;
            this.businessInfo.latitude = latitude;
            console.log('address + name :>> ', address);
        },

        // async judgeTheUsr() {
        //     if (this.businessInfo.ownerId) {
        //         this.addBusiness();
        //     } else {
        //         app.globalData.api.getUser().then(res4 => {
        //             this.businessInfo.ownerId = resultObj.user.id;

        //             this.addBusiness();
        //         });
        //     }
        // },

        addBusiness() {
            if (
                [
                    this.businessInfo.name,
                    this.businessInfo.address,
                    this.businessInfo.contactNumber,
                    this.businessInfo.announcement,
                    this.businessInfo.merchantService,
                    this.businessInfo.businessHours,
                    this.businessInfo.image,
                    this.businessInfo.idCardPositive,
                    this.businessInfo.idCardObverse,
                    this.businessInfo.businessLicense,
                    this.businessInfo.backgroundPicture,
                    this.businessInfo.classification,
                    this.frstClasClassification,
                    this.secondaryClassification,

                    //classification
                ].includes('')
            ) {
                return this.$refs.uToast.show({ title: '不能为空~~', type: 'error' });
            } else {
                if (this.value) {
                    app.globalData.api.addBusiness(this.businessInfo).then(res => {
                        if (res.code == 200) {
                            this.$refs.uToast.show({ title: '入驻成功 , 请等待审核~~', type: 'success' });
                            setTimeout(() => {
                                uni.switchTab({
                                    url: 'user-center',
                                });
                            }, 1000);
                        } else if (res.code == 300) {
                            this.$refs.uToast.show({ title: res.message, type: 'error' });
                        }
                    });
                } else {
                    this.$refs.uToast.show({ title: '请点击用户协议', type: 'error' });
                }
            }
        },
        ChooseImage(str) {
            var that = this;

            wx.chooseImage({
                count: 3, //最多可以选择的图片总数
                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths;
                    that.imgList = res.tempFilePaths;
                    wx.showToast({
                        title: '正在上传...',
                        icon: 'loading',
                        mask: true,
                        duration: 2000,
                    });

                    var uploadImgCount = 0;
                    for (var i = 0, h = tempFilePaths.length; i < h; i++) {
                        wx.uploadFile({
                            url: 'https://tdg.qianjitianxia.com/upload/upload',
                            filePath: tempFilePaths[0],
                            name: 'uploadFile',
                            header: {
                                'Content-Type': 'multipart/form-data',
                            },
                            success: function(res) {
                                uploadImgCount++;
                                var data = JSON.parse(res.data);
                                //如果是最后一张,则隐藏等待中
                                if (uploadImgCount == tempFilePaths.length) {
                                    wx.hideToast();
                                }
                                if (data.link) {
                                    that.setData({
                                        [str]: data.link,
                                    });
                                }
                            },
                            fail: function(res) {
                                console.log(res);
                                wx.hideToast();

                                this.$refs.uToast.show({ title: '上传图片失败', type: 'error' });
                            },
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rect {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
.sfz {
    display: flex;
    margin-top: 20rpx;

    image {
        width: 300rpx;
        height: 200rpx;
        z-index: 999;
    }
}
.sfz image::first-child {
    margin-right: 30rpx;
}
.dianji {
    position: absolute;
    top: 70rpx;
    right: 34%;
    font-size: 40rpx;
    text {
        font-size: 60rpx !important;
        font-family: PingFang SC;
        color: #999 !important;
    }
}

.content {
    .determine {
        width: 690rpx;
        height: 80rpx;
        background: #f8ce39;
        border-radius: 12rpx;

        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;
        margin: 60rpx 0;
    }

    .head {
        width: 690rpx;

        background: #ffffff;
        border-radius: 20rpx;

        .personal {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        input {
            width: 100%;
        }

        .info {
            margin-top: 30rpx;

            text {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;

                &::after {
                    content: '*';
                    color: red;
                    margin-left: 5rpx;
                    font-size: 28rpx;
                }
            }

            .info_o {
                width: 630rpx;
                height: 70rpx;
                border: 1rpx solid #e6e6e6;
                border-radius: 6rpx;
            }
        }
    }
}
</style>
